<template>
  <div>
    <el-table :border="true" :data="tableData" fit  :span-method="objectSpanMethod" height="350">
      <el-table-column prop="project_name_name" label="所属项目" />
      <el-table-column prop="event_name" label="事项名称" />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.event_status=='1'?'完成':'跟进中' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="end_time" label="完成时间">
        <template slot-scope="scope">
          {{ scope.row.end_time | formatDate }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: ["tableData"],
  filters: {
    formatDate(value) {
      return moment(value).format("YYYY-MM-DD");
    },
  },
  data(){
    return {
      dataSource: [],
      // mergeArr: ['project_name_name', 'event_name', 'event_status', 'end_time'], // 表格中的列名
      mergeArr: ['project_name_name'], // 表格中的列名
      mergeObj: {},
    }
  },
  watch: {
    tableData:{
      handler(v){
        this.dataSource = v
        this.getSpanArr(v)
        console.log('this.mergeObj', this.mergeObj)
      },
      deep: true
    }
  },
  methods: {
    // getSpanArr方法
    getSpanArr(data) {
        this.mergeArr.forEach((key, index1) => {
            let count = 0; // 用来记录需要合并行的起始位置
            this.mergeObj[key] = []; // 记录每一列的合并信息
            data.forEach((item, index) => {
                // index == 0表示数据为第一行，直接 push 一个 1
                if(index === 0) {
                    this.mergeObj[key].push(1); 
                } else {
                    // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
                    if(item[key] === data[index - 1][key]) { 
                        this.mergeObj[key][count] += 1;
                        this.mergeObj[key].push(0);
                    } else {
                        // 如果当前行和上一行其值不相等 
                        count = index; // 记录当前位置 
                        this.mergeObj[key].push(1); // 重新push 一个 1
                    }
                }
            })
        })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 判断列的属性
      if(this.mergeArr.indexOf(column.property) !== -1) { 
          // 判断其值是不是为0 
          if(this.mergeObj[column.property][rowIndex]) { 
              return [this.mergeObj[column.property][rowIndex], 1]
          } else {
              // 如果为0则为需要合并的行
              return [0, 0]; 
          }
      }
    }
  }
};
</script>

<style>
</style>